<template>
  <main>
    <!-- reportTable 数据报表组件 -->
    <div class="title">「数据报表组件演示」</div>
    <button class="button" @click="changeNullStatus">切换空态</button>
    <reportTable
      title="数据报表"
      hrefTitle="过去30天"
      :showNullStatus="reportTableData.data.isActive"
      nullText="暂无投放数据，添加商品正式投放后可查看数据"
      :column="reportTableData.data.column"
      :reportList="reportTableData.data.reportList"
    />

    <!-- dropdownMenu 下拉菜单组件 -->
    <div class="title">「下拉菜单组件演示」</div>
    <reportTable
      title="右侧下拉展开菜单"
      :column="4"
      :reportList="reportTableData.data.reportList"
    >
      <template v-slot:hrefTitleExtra>
        <dropdownMenu
          :dropdownMenuList="[
            '最近一周',
            '最近一个月',
            '最近三个月',
            '最近一年',
            '最近两年',
            '最近五年',
            '最近十年',
          ]"
        />
      </template>
    </reportTable>

    <!-- 获取随机颜色 -->
    <div class="title">「获取随机颜色演示」</div>
    <div style="display: flex;">
      <button class="button" @click="getColor">获取随机颜色</button>
      <div class="random-color-content" ref="randomColorContent">{{ randomColor }}</div>
    </div>

    <!-- movable 动感图表 -->
    <!-- <div class="title">动感图表演示</div>
    <button @click="isActive = !isActive" class="button">切换</button>
    <movableTable :is-active="isActive">
      <div class="movable-table-content">主内容</div>
    </movableTable> -->

    <!-- swipeCell 滑动单元组件 -->
    <!-- <div class="title">滑动单元组件演示</div>
    <swipeCell>
      <template #left> 左 </template>
      <div class="swipe-cell-content">中间</div>
      <template #right> 右 </template>
    </swipeCell> -->
  </main>
</template>

<script lang="ts">
export default {
  name: "indexPage",
};
</script>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { reportTable, dropdownMenu, swipeCell, movableTable } from "qing-ui";

/**
 * data
 */
const reportTableData = reactive({
  data: {
    isActive: false,
    column: 4,
    reportList: {
      现金花费: "-",
      赠款花费: "-",
      点击量: "-",
      平均点击花费: "-",
      点击率: "-",
      投入产出比: "-",
      展现量: "-",
      加购和收藏: "-",
      成交金额: "-",
      成交笔数: "-",
      平均每笔花费: "-",
    },
  },
});
const randomColor = ref('')
const randomColorContent = ref()

/**
 * methods
 */
const changeNullStatus = () => {
  reportTableData.data.isActive = !reportTableData.data.isActive;
};

const getColor = () => {
  randomColor.value = getRandomColor()
  randomColorContent.value.style.backgroundColor = randomColor.value
};

const getRandomColor = () => {
  return (
    "#" +
    ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6)
  );
}
function getRandomColor2() {
  return (
    "rgb(" +
    [Math.random() * 255, Math.random() * 255, Math.random() * 255].join(",") +
    ")"
  );
}
</script>

<style lang="less">
@import "./reset.less";
</style>

<style lang="less" scoped>
@import "./index.less";
</style>
